var imagesArr = [];
(function() {
  // 项目基本信息 - dom 查询
  var customerName = document.getElementById('customerName'),
    contacts = document.getElementById('contacts'),
    regionCode = document.getElementById('regionCode'),
    address = document.getElementById('address'),

    receiveAddress = document.getElementById('receiveAddress'),
    receiveContacts = document.getElementById('receiveContacts'),
    phone = document.getElementById('phone'),
    amount = document.getElementById('amount'),
    contractDate = document.getElementById('contractDate');

  var path = 'http://pm.ht-home.cn/v1/api/others/getContractInfoForShare.json?projectId=5621',
    xhr = new XMLHttpRequest();
  xhr.open('GET', path, true);
  xhr.send();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {

        var jsonData = JSON.parse(xhr.responseText);

        // 项目基本信息 - dom 插入数据
        customerName.innerHTML = jsonData.data.customerMsg.customerName;
        contacts.innerHTML = jsonData.data.customerMsg.contacts;
        regionCode.innerHTML = jsonData.data.customerMsg.regionCode;
        address.innerHTML = jsonData.data.customerMsg.address;

        receiveAddress.innerHTML = jsonData.data.address;
        receiveContacts.innerHTML = jsonData.data.contacts;
        phone.innerHTML = jsonData.data.phone;
        amount.innerHTML = jsonData.data.amount;
        contractDate.innerHTML = jsonData.data.contractDate;

        function insertImg(classStr) {
          var element = document.getElementsByClassName(classStr);
          // 图片 - 数据
          jsonData.data.classList.forEach(function(list, index) {
            if (typeof(list[classStr]) !== 'undefined') {
              list[classStr].forEach(function(image, index) {
                var newNode = document.createElement('li');
                newNode.className = 'list-content';
                var str = '';
                str += '<img onclick="useHammer(event, ' + index + ')" class="' + classStr + 'image" src="';
                str += image.smallImageUrl;
                str += '">';
                imagesArr.push(image.largeImageUrl);
                newNode.innerHTML = str;
                element[0].appendChild(newNode);
              });
            } else {
              console.log('json 文件中 list[classStr] 未定义');
            }
          });

          // 图片 - 大小
          var images = document.querySelectorAll('.' + classStr + 'image'),
            vw = document.body.clientWidth,
            imageWidth = vw * 0.3;
          marginTop = (vw - imageWidth * 3) / 4;
          images.forEach(function(image) {
            image.parentNode.style.height = imageWidth + 'px';
            image.parentNode.style.marginTop = marginTop + 'px';
          });
          images[images.length - 1].parentNode.style.marginBottom = marginTop + 'px';
        }

        insertImg('CONTRACT_HT');
      }
    }
  };
})();

function useHammer(e, index) {
  var mask = document.getElementById('hammer-mask'),
    bg = document.getElementById('hammer-bg'),
    box = document.getElementById('hammer-box'),
    page = document.getElementById('hammer-page'),
    img = document.getElementById('image-big'),

    scrollTop = document.getElementsByTagName('body')[0].scrollTop;

  mask.style.top = scrollTop;
  bg.style.top = scrollTop;
  window.initHammer(mask, bg, box, page, img);
  window.showHammer(imagesArr, index);
}
